<template>
  <div class="comment">
    <p>评论</p>
    <el-form>
      <el-input
        ref="inputs"
        v-model="input"
        placeholder="说点什么吧..."
        type="textarea"
        rows="2"
      ></el-input>
      <div class="up">
        <el-upload
          ref="upload"
          action="http://157.122.54.189:9095/upload"
          name="files"
          list-type="picture-card"
          :on-success="uploadImg"
          :on-remove="removeImg"
          :with-credentials="false"
          :file-list="fileList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-button type="primary" @click="sumbit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ["id"],
  data() {
    return {
      input: "",
      form: {
        pics: [],
        post: this.id,
        content: this.input,
        follow: ""
      },
      fileList: []
    };
  },
  methods: {
    uploadImg(response, file, fileList) {
      // this.postform.cover.push({ id: esponse.data.id });
      this.form.pics.push(response[0]);
      console.log(file);
    },
    removeImg(file, fileList) {
      let id = file.response.id;
      for (let i = 0; i < this.form.pics.length; i++) {
        if (this.form.pics[i].id === id) {
          this.form.pics.splice(i, 1);
          break;
        }
      }
    },
    sumbit() {
      // this.$axios({
      //   method: "post",
      //   url: `/comments`,
      //   headers: {
      //     Authorization: "Bearer " + this.$store.state.user.userinfo.token
      //   },
      //   data: { content: this.input, post: this.id, pics: this.form.pics }
      // }).then(res => {
      //   this.$message({
      //     message: res.data.message,
      //     type: "success"
      //   });
      // });
      this.form.content = "";
      this.form.pics = [];
      this.follow = "";
      this.fileList = [];
      this.$refs.upload.clearFiles();
      this.$refs.inputs.clear();
    }
  }
};
</script>

<style lang="less" scoped>
.comment {
  p {
    font-size: 20px;
    padding: 10px 0;
  }

  .up {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    /deep/.el-button {
      flex-grow: 0;
      width: 56px;
      height: 28px;
      padding: 0;
    }
    /deep/.el-upload {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }
  }
}
</style>
